<!DOCTYPE html>
<html>

<head>
    <title>SIS加班统计助手</title>
    <meta charset="utf-8" />
</head>
<style>
    body {
        width: 630px;
        min-width: 100px;
    }

    table.gridtable {
        margin-top: 5px;
        font-family: verdana, arial, sans-serif;
        font-size: 9px;
        color: #333333;
        border-width: 1px;
        border-color: slategrey;
        border-collapse: collapse;
    }

    table.gridtable th {
        border-width: 1px;
        text-align: center;
        font-size: 12px;
        padding: 8px;
        border-style: solid;
        border-color: slategrey;
        background-color: #1a70b4;
    }

    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        text-align: center;
        border-style: solid;
        border-color: slategrey;
        background-color: #ffffff;
    }

    .title {
        background-color: #1a70b4;
        font-size: 15px;
        font-weight: bolder;
        color: whitesmoke;
    }

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .left {
        display: flex;
        align-items: center;
    }

    a {
        background-color: #1a70b4;
        border-radius: 12px;
        border: none;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }

    .font {
        font-size: 20px;
        font-weight: bolder;
    }

    .hint {
        margin-left: 5px;
        font-size: 12px;
        color: #5756568e;
    }

    .sumOvertime {
        font-size: 15px;
        font-weight: bolder;
    }

    .gone {
        visibility: hidden;
    }
</style>

<body>
    <div class="top">
        <div class="left">
            <image src="img/icon.png" style="width: 35px;height: 35px;"></image>
            <span class="font">SIS加班统计助手</span>
            <span class="hint">v1.0.2</span>
        </div>
        <div>
            <a href="#" id="getRecord" class="btn btn-primary">一键生成加班记录</a>
        </div>
    </div>
    
    <p class="sumOvertime gone"></p>
    <div id="overtime_table"></div>
</body>

<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>

</html>